<!--  -->
<template>
  <div class="record-content">
    <block v-for="(recordItem, recordKey, recordIndex) in list" :key="recordIndex">
      <div class="record-time">
        <!-- <div class="flex-a-c flex-j-sb">
          <div class="flex-a-c">
            <h3>{{ recordKey }}</h3>
          </div>
        </div> -->

          <div class="record-time-item" v-for="(timeItem, timeIndex) in recordItem" :key="timeIndex">
            <div class="updated-at" v-if="timeItem.operation !== 'phone'">{{ timeItem.updated_at }}</div>
            <div v-if="timeItem.operation == 'phone'" class="flex-j-sb head">
              <div class="flex-a-c">
                <div class="updated-at-1">{{ timeItem.updated_at }}</div>
                <div style="font-size: .875rem;font-weight: 500;color: #3B3B4A;">{{ timeItem.has_one_staff&&timeItem.has_one_staff.name }}</div>
              </div>
              <div  class="iconfont icon-icon_edit" style="color:#AAAAB3;" @click="updateRecord(timeItem.id,timeItem.content)"></div>
            </div>
            <div class="record-list">
              <div class="time-content flex">
        
                <div class="timeline-right ">
                  <div class="record-mian">
                    <template v-if="tabIndex == 4 || tabIndex == 6 && timeItem.operation == 'update'">
                      <maintain-item :tainBtn="true" :datas="timeItem.show_content" :names="timeItem.param&&timeItem.param.form"></maintain-item>
                    </template>
                    <template
                      v-else-if="tabIndex == 3 || tabIndex == 6 && (timeItem.operation == 'assignment' || timeItem.operation == 'distribution' || timeItem.operation == 'back' || timeItem.operation == 'share' || timeItem.operation == 'receive')">
                      <div class="linkup-msg" style="margin-bottom: 1rem;">
                        <span class="msg-title">{{ timeItem.show_title[0] }}</span>
                        <span style="color:#6E6E79">{{ timeItem.show_title[1] }}</span>
                      </div>
                      <block v-for="(contentItem, contentKey, contentIndex) in timeItem.show_content" :key="contentIndex">
                        <div class="linkup-msg" v-if="contentItem">
                          <span class="msg-title">客户</span>
                          <span>{{ contentItem }}</span>
                        </div>
                      </block>
                    </template>
                    <template v-else>
                      <block v-for="(contentItem, contentKey, contentIndex) in timeItem.show_content" :key="contentIndex">
                        <div v-if="tabIndex == 2 && contentItem || tabIndex == 6 && contentItem && timeItem.param">
                          <div class="flex-j-sb">
                            <div class="linkup-msg flex-a-c" style="flex:1;">
                                <span class="msg-title" style="white-space: nowrap;">{{ contentKey }}</span>
                                <span>{{ contentItem }}</span>
                            </div>
                          </div>

                        </div>
                        <div v-else-if="tabIndex == 1 || tabIndex == 6">
                          <div class="linkup-msg " :class="{'flex-j-sb':timeItem.edit_btn}">
                            <template v-if="!timeItem.edit_btn">
                              <div class="flex-j-sb">
                                <span class="msg-title">
                                  {{ timeItem.show_title[0] }} <span style="color:#999">{{ timeItem.show_title[1]
                                    }}</span>{{ timeItem.show_title[2] }}:
                                </span>
                                <div class="iconfont icon-icon_edit" @click="timeItem.edit_btn = true"></div>
                              </div>
                              <div  class="text-container-box">
                                <p  class="text-container" ref="PostContent" style="display: block;">
                                  <span v-show="timeItem.show_more" @click="show_more_handle" class="view-more">{{text_btn}}</span>
                                  <span  class="text-content"> {{ contentItem }}</span>
                                </p>
                              </div>

                            </template>
                            <template v-else>
                              <div class="diy-textarea">
                                <textarea v-model="timeItem.content"></textarea>
                                <div class="diy-textarea-bottom">
                                  <span>{{ timeItem.show_title[2].length }}/1000</span>
                                  <i class="iconfont icon-icon_select1"
                                    @click="edit_handle(timeItem.id, timeItem.content, [], timeItem,contentKey)"></i>
                                </div>
                              </div>
                            </template>
                          </div>
                        </div>

                        <div class="linkup-msg" v-else>
                          <span class="msg-title" v-if="contentKey !== 'default'">{{ contentKey }}</span>
                          <span>{{ contentItem }}</span>
                        </div>
                      </block>
                    </template>

                    <div class="accessory-list flex" v-if="timeItem.file_info.length > 0 && (tabIndex == 1 || tabIndex == 6)">
                      <div v-if="timeItem.file_info.length < 9 && timeItem.edit_btn"  class="flex accessory-list-upload" >
                        <van-uploader :after-read="(e, flag) => multipleMethod(e, flag, timeItem)" accept="*">
                          <div class="flex-a-c" style="flex-direction: column; align-items: center; cursor: pointer;">
                            <span class="upload-text"><span class="area-accept">+上传附件</span> {{ timeItem.file_info.length
                              }}/9</span>
                          </div>
                        </van-uploader>
                      </div>

                      <div class="accessory-item" v-for="(imgItem, imgIndex) in timeItem.file_info" :key="imgIndex">
                        <div class="item-wrap flex flex-a-c"
                          :class="imgItem.format === 'png' || imgItem.format === 'jpg' || imgItem.format === 'png' || imgItem.format === 'jpeg' ? 'w45' : 'w50'">
                          <img :src="require('../../../assets/images/wechat_sidebar/DOC_DOCX.png')"
                            v-if="['doc', 'docx'].includes(imgItem.format)" />
                          <img :src="require('../../../assets/images/wechat_sidebar/XLS_XLSX.png')"
                            v-else-if="['xls', 'xlsx'].includes(imgItem.format)" />
                          <img :src="require('../../../assets/images/wechat_sidebar/JPG_JPEG_PNG_GIF.png')"
                            v-else-if="['jpg', 'png', 'jpeg'].includes(imgItem.format)"
                            @click.stop="lookImg(imgItem.url)" />
                          <img :src="require('../../../assets/images/wechat_sidebar/MP4_AVI_MOV_MWV.png')"
                            v-else-if="['mp4', 'avi', 'mov', 'rmvb', 'rm', 'flv', '3gp'].includes(imgItem.format)" />
                          <img :src="require('../../../assets/images/wechat_sidebar/MP3_WAV_AAC.png')"
                            v-else-if="['cda', 'wav', 'mp3', 'wmv', 'flac', 'aac'].includes(imgItem.format)" />
                          <img :src="require('../../../assets/images/wechat_sidebar/ZIP_RAR.png')"
                            v-else-if="['zip', 'rar'].includes(imgItem.format)" />
                          <img :src="require('../../../assets/images/wechat_sidebar/PDF.png')"
                            v-else-if="['pdf'].includes(imgItem.format)" />
                          <img :src="require('../../../assets/images/wechat_sidebar/TXT.png')"
                            v-else-if="['txt', 'text'].includes(imgItem.format)" />
                          <div class="wrap-title">
                            <span class="name"
                              :class="{ 'fixed-width': imgItem.format === 'jpg' || imgItem.format === 'png' || imgItem.format === 'jpeg' }"
                              style="padding: 0;">{{ imgItem.name }}</span>
                            <p>{{ imgItem.size }}</p>
                          </div>
                        </div>
                        <div class="item-right flex">
                          <van-button plain type="primary" round color='#00001C' class="accessory-btn"
                            @click.stop="lookImg(imgItem.url)"
                            v-if="imgItem.format === 'jpg' || imgItem.format === 'png' || imgItem.format === 'jpeg'">预览
                          </van-button>
                          <van-button plain type="primary" class="accessory-btn" color='#00001C'
                            style="margin-left: .6875rem;" round
                            @click.stop="clientDelete(timeItem.id, timeItem.file_info, imgIndex)">
                            删除
                          </van-button>
                          <van-button plain type="primary" color='#00001C' class="accessory-btn"
                            style="margin-left: .6875rem;" round
                            @click.stop="clientDownload(timeItem.file_info, imgIndex)">
                            下载
                          </van-button>

                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>    
          </div>
      </div>
    </block>

    <van-popup v-model="followUpShow" round  position="bottom" >
      <div class="popup-diy">
        <div class="flex-a-c flex-j-sb" style="align-items: flex-end;">
          <span class="popup-diy-title">修改跟进记录</span>
          <span @click="followUpShow=false;" style="width: 1.5rem;height: 1.5rem;border-radius: 50%;background-color: #F0F0F1;" class="flex-a-c flex-j-c"><i class="iconfont icon-guanbi" style="color:#6E6E79;font-size: 10px;"></i></span>
        </div>
        <textarea v-model="content" placeholder="请输入跟进记录"></textarea>
        <div class="popup-diy-btn">
          <div class="popup-diy-btn-cancel" @click="followUpShow=false;">取消</div>
          <div class="popup-diy-btn-confirm" @click="followupApi">确认</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import maintainItem from "./maintainItem.vue";
export default {
  name: '',
  //import引入的组件需要注入到对象中才能使用
  components: {
    maintainItem
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    tabIndex: Number
  },
  data() {
    return {
      files_list: [],
      text_btn:"查看更多",
      followUpShow:false,
      record_id:'',
      content:"",
    };
  },
  mounted(){
    (this.list&&this.list.length!==0) && this.init_content_height();
  },
  //方法集合
  methods: {
    init_content_height(){
     this.$nextTick(()=>{
      this.$refs.PostContent.forEach((item,index)=>{
        if(item.offsetHeight<item.scrollHeight){
          item.querySelector('.view-more').style.display = 'block';
        }
      })
     })

   
    },
    updateRecord(id, content) {
      this.followUpShow=true;
      this.record_id = id;
      this.content = content;
    },
    followupApi() {
      $http.post("plugin.wechat-chat-sidebar.frontend.controller.customer.dynamic.save-followup", { form:{content:this.content}, record_id: this.record_id }, "正在获取").then(
        response => {
          if (response.result == 1) {
            this.$toast(response.msg);
            this.followUpShow=false;
          } else {
            this.$dialog.alert({ message: response.msg });
          }
        },
        function(response) {
          // console.log(response);
          // error callback
        }
      );
    },
    edit_handle(record_id, content = '', files = [], timeItem = '',contentKey) {
      let json = {}
      console.log(timeItem,'-=====');
      // this.$set(this.list[recordKey][timeIndex], 'show_content',content);
      if (content) {
        json.content = content;
      }
      if (files.length > 0) {
        json.files = files;
      }
      timeItem.show_content ={ contentKey:content};
      $http.post("plugin.wechat-chat-sidebar.frontend.controller.customer.dynamic.save-followup", { form: json, record_id }, "正在获取").then(
        response => {
          if (response.result == 1) {
          
            this.$toast(response.msg);
            // this.form.content = "";
            // this.form.files = [];
            // this.fileList = [];
            // this.dynamicList();
            if (files.length == 0) {
              timeItem.edit_btn = false;
            }
          } else {
            this.$dialog.alert({ message: response.msg });
          }
        },
        function (response) {
          console.log(response);

        }
      );
    },
    show_more_handle(){
      const textContainer = document.querySelector('.text-container');
      const moreButton = document.querySelector('.more-button');
      textContainer.classList.toggle('expanded'); // 切换展开状态
        if (textContainer.classList.contains('expanded')) {
          this.text_btn = '收起'
        } else {
          this.text_btn = '查看更多'
      }
    },

    lookImg(url) {
      this.$emit('lookImg', url);
    },
    clientDelete(id, files, index, type = '') {
    let filteredFiles = files.filter((file, fileIndex) => fileIndex !== index);

      //删除跟进文件
      this.$dialog
        .confirm({
          message: "是否删除文件"
        })
        .then(() => {
          let fileArr = [];
          fileArr = files.splice(index, 1);
          if(files.length==1){
            this.$emit('clientDel', { url: '', id });
            return;
          }
          let _url = []
          filteredFiles.forEach(item=>{
            _url.push(item.url);
          })
          this.$emit('clientDel', { url: _url, id })

        })
        .catch(() => {
          // on cancel
        });
      
    },
    clientDownload(files, index, type = '') {
      let fileArr = files.find((item, fileIndex) => fileIndex === index);
      console.log(fileArr, 'fileArr==');
      let fileName = fileArr.name;
      let uploadUrl = this.fun.getRealUrl("plugin.wechat-chat-sidebar.frontend.controller.customer.dynamic.downloadFile", {});
      let options = { url: fileArr.url };
      // this.exportDownload(uploadUrl, options,fileName);
      this.$emit('clientDown', { uploadUrl, options, fileName });

    },
    multipleMethod(e, flag, item) {
      if (e && e.length) {
        for (let i = 0; i < e.length; i++) {
          this.onRead(e[i], flag, item);
        }
      } else this.onRead(e, flag, item);
    },
    onRead(e, flag, item) {
      e.status = "uploading";
      e.message = "上传中...";
      let fd = new FormData();
      fd.append("file", flag === true ? e : e.file);
      fd.append('need_name', 1)
      // if (flag === true) {
      //   fd.append("file", e); // 第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
      // } else {
      //   fd.append("file", e.file); // 第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
      // }
      let uploadUrl = this.fun.getRealUrl("upload.uploadPic", {});
      let headers = { "Content-Type": "multipart/form-data" };

      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "正在上传中...",
        selector: "#custom-selector"
      });

      axios
        .post(uploadUrl, fd, { headers })
        .then(({ data: { result, msg, data } }) => {
          this.$toast.clear();
          if (result === 1) {
            e.status = "done ";
            // this.form.files.push(data.img_url);
            // this.edit_handle(item.id,'',[data.img_url])
            item.file_info.push({ url: data.img_url, name:e.file.name, format: data.img.substring(data.img.lastIndexOf(".") + 1) })
            console.log(item.file_info,'item.file_info==');
            let _url = [];
            item.file_info.forEach(item=>{
              _url.push(item.url);
            })
            this.$emit('clientUpdate', { url:_url , id:item.id });
          } else {
            e.status = "failed";
            e.message = "上传失败";
          }
          this.$toast(msg);
        })
        .catch(error => {
          this.$toast.clear();
          console.log(error);
        });
    }
  },
}
</script>
<style lang="scss" scoped>
.popup-diy{
  padding: 1.125rem .75rem 1.5625rem;
  .popup-diy-btn{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .popup-diy-btn-cancel{
    width: 10.3125rem;
    height: 2.5rem;
    border-radius: 1.5625rem;
    font-weight: 400;
    border: 1px solid #AAAAB3;
    font-size: .875rem;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    color:#00001C;
  }
  .popup-diy-btn-confirm{
    font-weight: 400;
    font-size: .875rem;
    width: 10.3125rem;
    height: 2.5rem;
    justify-content: center;
    display: flex;
    align-items: center;
    background: var(--themeBaseColor);
    border-radius: 1.5625rem;
    color:#fff;
  }
  .popup-diy-title{
    font-weight: bold;
    font-size: 1rem;
    line-height: 1;
    color: #00001C;
  }
  textarea{
    width: 100%;
    display: block;
    border: none;
    margin-top: .9375rem;
    padding: .75rem;
    height: 10rem;
    background: #F5F5F5;
    border-radius:.5rem;
    margin-bottom: 5.1563rem;
  }
}
.updated-at-1{
  position: relative;
  font-weight: 500;
  font-size: .9375rem;
  text-align: left;
  line-height: 1;
  color: #00001C;
  margin-right: .625rem;
  padding-right: .5938rem;
  &::after{
    position: absolute;
    content:"";
    right:0;
    top:.1563rem;
    width: 1px;
    height: .625rem;
    background: #AAAAB3;
  }

}
.updated-at{
  font-weight: 500;
  font-size: .9375rem;
  text-align: left;
  line-height: 1;
  border-bottom: 1px solid #F0F0F1;
  padding-bottom: .875rem;
  margin-bottom: .1875rem;
  color: #00001C;
}
/* 展开后的样式 */
.text-container-box{
  margin-top: .3125rem;
  display: flex;
}
.text-container-box .expanded{
  display:unset !important;
  max-height:unset;
  overflow: unset !important; 
  text-overflow: unset !important;
  -webkit-line-clamp: unset;

}

.text-container {
  word-break: break-all;
  display: -webkit-box;
  overflow: hidden; 
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: #868585;
  max-height: 4.0625rem;
  box-sizing: border-box;
  &::before{
    content:"";
    float: right;
    height: calc(100% - 1.25rem);
  }
}

.text-content {
  font-size: 0.9375rem !important;
    color: rgb(0, 0, 28) !important;

}
.view-more {
  padding-right: 1.1875rem;
  float: right;
  clear: both;
  color:#466899 !important;
  line-height: 1;
  font-weight: 400;
  font-size: 0.9375rem !important;
}

.fixed-width {
  width: 6rem;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  font-size: 0.875rem;
}

.diy-textarea {
  width: 100%;
  background-color: #F5F5F5;
  padding: .8125rem;

  textarea {
    width: 100%;
    display: block;
    border: none;
    background-color: #F5F5F5;
  }

  .diy-textarea-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1;
    margin-top: 1.25rem;

    .icon-icon_select1 {
      color: #AAAAB3;
    }

    span {
      font-weight: 400;
      font-size: .8125rem !important;
      color: #999999 !important;
    }

  }
}

.msg-title {
  font-size: .8125rem;
  color: #00001C
}

.w45 {
  width: 45%;
}

.w50 {
  width: 50%;
}

.client-input {
  background: #F5F5F5;
  color: #999999;
}

.client-input ::v-deep .el-form-item {
  margin-bottom: 10px;
}

.record-content {
  margin: 0;

  img {
    margin: 0;
  }
  .head{
    padding-bottom: .875rem;
    margin-bottom: .1875rem;
    border-bottom: 1px solid #F0F0F1;
  }
  .record-time-item{
    background: #FFFFFF;
    border-radius: 8px 8px 8px 8px;
    padding: 15px 10px 10px 10px;
    margin-top: 10px;

  }
  .record-time {
    width: 100%;

    h3 {
      text-align: left;
      font-size: 0.75rem;
      line-height: 0.75rem;
      font-weight: 400;
      color: #252525;
    }

    .time-head {
      width: 100%;
      margin-top: 0.9375rem;

      .time-head-left {
        margin-right: 0.75rem;

        .time-icon {
          min-width: 1.375rem;
          min-height: 1.375rem;
          // padding: 0.375rem 0.25rem;
          border-radius: 50%;

          // color: #7cc97a;
          // background-color: #e0f4e4;
          .iconfont {
            min-width: 1.375rem;
            min-height: 1.375rem;
            // padding: 0.375rem 0.25rem;
            border-radius: 50%;
            font-size: 0.875rem;
            line-height: 0.875rem;
          }

          .icon-card_phone {
            color: #7cc97a;
          }

          // .icon-fontclass-jilu3 {
          //   color: #a480dc;
          //   background-color: #f0ebf9;
          // }
        }

        .icon-fontclass-jilu3,
        .icon-zx_map_tel {
          color: #7cc97a;
          background-color: #e0f4e4;
        }

        .icon-fontclass-rengezhongxin {
          color: #a480dc;
          background-color: #f3edfe;
        }

        .icon-ht_content_apply {
          color: #a1c3f7;
          background-color: #f3edfe;
        }
      }

      .time-head-right {
        flex: 2;

        .time-title {
          font-size: 0.875rem;
          line-height: 0.875rem;
          font-weight: bold;
          color: #333;
        }

        .get-time {
          font-size: 0.625rem;
          line-height: 0.625rem;
          color: #666;
        }
      }
    }

    .time-content {
      margin-top: 0.4375rem;

      .timeline-left {
        width: 1.375rem;
        margin-right: 0.75rem;

        .timeline {
          width: 0.0625rem;
          height: 100%;
          background: #d4d4d4;
        }
      }

      .timeline-right {
        width: 100%;
        text-align: left;

        .timeline-phone {
          font-size: 0.75rem;
          line-height: 0.75rem;
          color: #252525;

          span {
            color: #666;
          }
        }

        .record-msg {
          font-size: 0.6875rem;
          font-size: 13px;
          color: #00001C;
          padding: 10px 13px 10px 16px;
          background: #F5F5F5;
          border-radius: 8px 8px 8px 8px;

        }

        .record-mian {
          // display: inline-block;
          text-align: left;
          margin: 0.75rem 0 0 0;
          border-radius: 0.125rem;

          .linkup-msg {
            span {
              font-size: 14px;
              color: #00001C;

              &:nth-child(1) {
                padding: 0 13px 0 0;
              }
            }
          }
          .accessory-list-upload{
            margin-bottom: 1.25rem;margin-top: .8438rem;line-height: 1;color:var(--themeBaseColor);
          }
          .accessory-list {
            width: 100%;
            padding: 0.25rem 0 0;
            flex-direction: column;


            //新的样式
            .accessory-item {
              // width:100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              position: relative;
              margin-bottom: 1.25rem;

              .item-wrap {

                img {
                  width: 41px;
                  height: auto;
                  display: block;
                }


              }

              .wrap-title {
                padding: 0 0 0 9px;
                width: 100%;
                box-sizing: border-box;

                .name {
                  font-size: 14px;
                  color: #00001C;
                  padding: 0 0 8px 0;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                }

                p {
                  font-size: 13px;
                  color: #AAAAB3;
                }
              }

              .item-right {
                flex: 1;
                flex-shrink: 0;
                display: flex;
                justify-content: flex-end;

                .accessory-btn {
                  width: 3.25rem;
                  height: 1.75rem;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  white-space: nowrap;
                }
              }
            }


            p {
              font-size: 0.6875rem;
              color: #252525;
              padding: 0 0.375rem 0 0;
            }

            .accessory-img {
              margin: 0 0.875rem 0 0;
              position: relative;

              img {
                width: 3rem;
                height: 3rem;
              }

              .icon-adsystem_icon_cancle {
                position: absolute;
                right: 0;
                top: 0;
                transform: translate(40%, -40%);
              }
            }

            .accessory-file {
              padding: 0.625rem 0 0 0;
              flex-wrap: wrap;

              .name {
                font-size: 0.6875rem;
                color: #666;
              }

              img {
                width: 1.25rem;
                height: 1.25rem;
                margin: 0;
              }

              .el-icon-download {
                padding: 0 0 0 0.375rem;
              }

              .icon-fontclass-wenzhang {
                color: #666;
                padding: 0 0.25rem 0 0;
                font-size: 0.875rem;
                line-height: 0.875rem;
              }

              .icon-adsystem_icon_cancle {
                padding: 0 0 0 0.75rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>